@import '../../color.less';
@import '../../index.less';



.statusInfo{
    position: absolute;
    width: 300px;
    z-index: 999;
    top: 98px;
    padding: 10px;
    text-align: center;
    height: 40px;
    line-height: 20px;
    background: white;
    border-right: 1px solid #d7d7d7;
}
.loadingContent {
    :global(.ant-spin-text){
        padding-top: 16px !important;
    }
    .wraploadingText {
        display: inline-block;
        width: 20vw;
    }
}
.App {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
}

.popoverHeader {
    font-size: 16px;
    .female {
        margin-left: 10px;
        color: #f08cd1;
        font-size: 20px;
    }
    .male {
        .female;
        color: @mainColor;
    }
    .subt {
        font-weight: 400;
        font-size: 12px;
        color: @opacityColor;
        padding-top: 4px;
    }
}
.popoverContent {
    max-width: 22vw;
    .item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding-bottom: 10px;
        .left {
            flex-shrink: 0;
            width: 96px;
            color: #000
        }
        .right {
            word-break: break-all;
        }
    }
}
.wrapCall {
    width: 70%;
    margin: 0 auto;
}
.callContent {
    text-align: center;
    line-height: 2;
    padding: 14px 20px;
    font-size: 16px;
    img {
        margin-bottom: 16px
    }
}

.leftBar {
    .dragBar;
    float: left;
    width: 70px;
    height: 100%;
    background-color: #26292d;
    padding-top: 40px;
    position: relative;
    font-size: 30px;
    .wrapAvatar {
        text-align: center;
        padding-top: 10px;
        padding-bottom: 4px;
        position: relative;
        .avatarBtn {
            display: inline-block;
            height: 44PX;
            width: 44PX;
            position: absolute;
            z-index: 999;
            left: 50%;
            transform: translateX(-50%);
            cursor: pointer;
        }
    }
    .name {
        position: absolute;
        top: 18px;
        font-size: 18px;
        width: 100%;
        text-align: center;
        font-weight: 500;
        color: #fff;
    }
    .menu {
        .nodrag;
        position: absolute;
        bottom: 26px;
        left: 50%;
        transform: translateX(-50%);
        cursor: pointer;
        font-size: 40px;
        line-height: 40px;
        color: #fbfbfb;
    }
}

.hasNew {
    position: absolute;
    color: @warnColor;
    font-size: 12px;
    line-height: 12px;
    top: 2px;
    right: -4px;
}
.indot {
    .hasNew;
    top: 6px;
    right: 4px;
}


.rightContent {
  overflow: hidden;
  height: 100%;
}

.wrapItem {
    .nodrag;
    cursor: pointer;
    text-align: center;
    padding: 10px 0;
    position: relative;
    color: #fbfbfb;
    .count {
        position: absolute;
        width: 22px;
        height: 22px;
        top: 10px;
        right: 4px;
        .bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            line-height: 22px;
            color: @warnColor;
            font-size: 22px;
        }
        .num {
            .bg;
            color: #fff;
            font-size: 12px;
        }
    }
}
.active {
    color: @mainColor
}

